<template>
    <view id="withdrawCard">
        <view class="header-block"></view>
        <radio-group @change="selectBankCard" >
            <label class="content" v-for="(item,index) in bankcardList" :key="index">
                <view class="content-title msfont" :class="item.icon" :style="{color:item.color}"></view>
                <view class="content-text">
                    <view class="bankcard-name">{{item.bankCard}}</view>
                    <view class="bankcard-detail">{{item.frontPart}}  {{item.behindPart}}</view>
                </view>
                <view class="content-action"><radio :value="index"></radio></view>
            </label>
        </radio-group>
        <view class="block"></view>
        <view class="bottom">
          <button :disabled="btnFlag" type="primary" class="confirmBtn" @click="bankCardConfirm">确定</button>
        </view>
    </view>
</template>
<script>
    import uniList from '@/components/uni-list/uni-list.vue'
    import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
    import uniCard from "@/components/uni-card/uni-card"
    import { bankCardAttribution } from "@/common/bankcard.js"
    import { getBankList } from "@/common/api.js"
    export default {
        name: "withdrawCard",
        data() {
            return {
                bankcardList:[],
                btnFlag:true,
                selected:'',
                bankPrimary:[],
            };
        },
        components: {
            uniList,
            uniListItem,
            uniCard
        },
        methods: {
            selectBankCard(e){
                // console.log(e)
                this.selected=e.detail.value
                this.btnFlag=false;
            },
            bankCardConfirm(){
                uni.setStorageSync('_walletInfo_',this.bankPrimary[this.selected])
                uni.navigateBack({
                    delta:1
                })
            },
            getBankIcon(code){
                switch(code){
                    case 'zfb':
                      return {icon:'ms-zhifubao',back:'#4292f6'};
                    case 'ICBC' :  //工商
                      return  {icon:'ms-ICBC',back:'#ff535a'}
                    // case 'COMM':   //交通银行
                    //   return  {icon:'ms-COMM',back:'#00408f'}
                    case 'BOC':    //中国银行
                      return  {icon:'ms-BOC',back:'#93172f'}
                    case 'CMB':     //招商银行
                       return  {icon:'ms-CMB',back:'#c8152d'}
                    case 'ABC':     //农业银行
                       return  {icon:'ms-ABC',back:'#079679'}
                    case 'CCB':     //建设银行
                       return  {icon:'ms-CCB',back:'#0d3e9d'}
                    case 'SPDB':     //浦发银行
                       return  {icon:'ms-CCB',back:'#ccc'}
                    default:
                      return  {icon:'ms-yinhangka',back:'#ccc'}
                }
            },
            getData(){
                let p = getBankList().then((res)=>{
                    const data = res.data;
                    if(data.errcode==0){
                        data.data.length && data.data.forEach((e)=>{
                            let cardData = bankCardAttribution(e.bank_card)
                            this.bankcardList.push({
                                id:e.id,
                                bankCard:e.bank_type=='zfb'?'支付宝账号':e.bank_name,
                                frontPart:e.bank_type=='zfb'?e.card_name:`尾号 ${e.bank_card?e.bank_card.slice(-4):''}`,
                                behindPart:e.bank_type=='zfb'?e.phone:`${cardData!='error'?cardData.cardTypeName:''}`,
                                icon:this.getBankIcon(cardData.bankCode).icon,
                                color:this.getBankIcon(cardData.bankCode).back,
                            })
                        })
                        this.bankPrimary=data.data;
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p
            },
        },
        onLoad(){
            this.getData()
        }
    };
</script>
<style lang="scss">
    #withdrawCard {
        position: relative;
        height: 100%;
        // padding-top: 24rpx;
        .header-block{
            height: 24rpx;
        }
        .content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            background: #fff;
            padding: 4rpx;
            .content-title{
                padding: 20rpx;
                padding-left: 30rpx;
                width: 70rpx;
                font-size: 56rpx;
                color: #FF565D;
            }
            .content-action{
                padding: 10rpx 30rpx;
            }
            .content-text{
                flex: 1;
                .bankcard-name{

                }
                .bankcard-detail{
                    font-size: 24rpx;
                    color: #999;
                }
            }
            .ms-yinhangka{
                font-size: 44rpx;
            }
        }
        .block{
            height: 90rpx;
        }
        .bottom{
            height: 90rpx;
            line-height: 90rpx;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: 32rpx;
            background: #fff;
            z-index:999;
            .confirmBtn{
              width: 100%;
              color: #fff;
              background: #1A66FF;
              // background: #9A3334;
              // color: #fff;
            }
        }
    }
</style>
